<!-- Page header -->
<div class="page-header d-print-none">
  <div class="container-xl">
    <div class="row align-items-center">
      <input type="text" style="display: none;" id="profile_user_id">
      <div class="col-auto">
        <span id="profile_avatar" class="avatar avatar-lg rounded"
          style="background-image: url(./image/avatar02.jpeg)"></span>
      </div>
      <div class="col">
        <h1 id="profile_nickname" class="fw-bold"></h1>
        <!-- <div class="my-2">描述信息</div> -->
        <div class="list-inline list-inline-dots text-muted">
          <div class="list-inline-item">
            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-message-plus" width="24"
              height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round"
              stroke-linejoin="round">
              <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
              <path d="M4 21v-13a3 3 0 0 1 3 -3h10a3 3 0 0 1 3 3v6a3 3 0 0 1 -3 3h-9l-4 4"></path>
              <path d="M10 11l4 0"></path>
              <path d="M12 9l0 4"></path>
            </svg>
            发贴数: <span id="profile_articleCount">666</span>
          </div>
          
          <div class="list-inline-item">
            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-message-plus" width="24"
              height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round"
              stroke-linejoin="round">
              <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
              <path d="M4 21v-13a3 3 0 0 1 3 -3h10a3 3 0 0 1 3 3v6a3 3 0 0 1 -3 3h-9l-4 4"></path>
              <path d="M10 11l4 0"></path>
              <path d="M12 9l0 4"></path>
            </svg>
            关注数: <a id="profile_subscribeCount" href="javascript:void(0);" class="text-reset">666</a>
          </div>
          <div class="list-inline-item">
            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-message-plus" width="24"
              height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round"
              stroke-linejoin="round">
              <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
              <path d="M4 21v-13a3 3 0 0 1 3 -3h10a3 3 0 0 1 3 3v6a3 3 0 0 1 -3 3h-9l-4 4"></path>
              <path d="M10 11l4 0"></path>
              <path d="M12 9l0 4"></path>
            </svg>
            粉丝数: <a id="profile_fanCount" href="javascript:void(0);" class="text-reset">666</a>
          </div>

          <div class="list-inline-item">
            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-inline" width="24" height="24" viewBox="0 0 24 24"
              stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
              <path stroke="none" d="M0 0h24v24H0z" fill="none" />
              <path d="M3 5m0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z" />
              <path d="M3 7l9 6l9 -6" />
            </svg>
            邮箱: <a id="profile_email" href="javascript:void(0);" class="text-reset"> - </a>
          </div>
          <div class="list-inline-item">
            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-user-plus" width="24"
              height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round"
              stroke-linejoin="round">
              <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
              <path d="M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0"></path>
              <path d="M6 21v-2a4 4 0 0 1 4 -4h4c.374 0 .735 .051 1.079 .147"></path>
              <path d="M16 19h6"></path>
              <path d="M19 16v6"></path>
            </svg>
            注册日期: <span id="profile_createTime"></span>
          </div>
        </div>
      </div>
      <div class="col-auto ms-auto" style="display: none;" id="div_profile_btn">
        <div class="btn-list">
          <a href="javascript:void(0);" class="btn btn-primary" id="btn_profile_send_message" data-bs-toggle="modal" data-bs-target="#index_message_modal">
            <!-- Download SVG icon from http://tabler-icons.io/i/check -->
            <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24"
              stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
              <path stroke="none" d="M0 0h24v24H0z" fill="none" />
              <path d="M4 21v-13a3 3 0 0 1 3 -3h10a3 3 0 0 1 3 3v6a3 3 0 0 1 -3 3h-9l-4 4" />
              <path d="M8 9l8 0" />
              <path d="M8 13l6 0" />
            </svg>
            发私信
          </a>
          <a href="javascript:void(0);" class="btn btn-pink" id="btn_profile_subscribe">
            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-hearts" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M14.017 18l-2.017 2l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 0 1 8.153 5.784" /><path d="M15.99 20l4.197 -4.223a2.81 2.81 0 0 0 0 -3.948a2.747 2.747 0 0 0 -3.91 -.007l-.28 .282l-.279 -.283a2.747 2.747 0 0 0 -3.91 -.007a2.81 2.81 0 0 0 -.007 3.948l4.182 4.238z" /></svg>
            关注
          </a>
          <a href="javascript:void(0);" class="btn btn-pink" id="btn_profile_cancel_subscribe">
            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-heart-x" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M19.5 12.572l-.5 .428m-6 6l-1 1l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /><path d="M22 22l-5 -5" /><path d="M17 22l5 -5" /></svg>
            取消关注
          </a>
          <a href="javascript:void(0);" class="btn btn-danger" id="btn_ban" style="display: none;">
            <svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-ban"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" /><path d="M5.7 5.7l12.6 12.6" /></svg>
            禁言
          </a>
          <a href="javascript:void(0);" class="btn btn-success" id="btn_unban" style="display: none;">
            <svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-ban"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" /><path d="M5.7 5.7l12.6 12.6" /></svg>
            解除禁言
          </a>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- Page body -->
<div class="page-body">
  <div class="container-xl">
    <div class="row g-3">
      <div class="col">
        <ul id="profile_article_body" class="timeline">
          <!-- 动态构建帖子列表 -->

        </ul>
      </div>
      <!-- 右侧部分 -->
      <div class="col-lg-4">
        <div class="row row-cards">
          <!-- 个人介绍 -->
          <div class="col-12">
            <div class="card">
              <div class="card-body">
                <h2 class="card-title">个人介绍</h2>
                <div id="profile_remark">
                  <p>这家伙很懒，什么也没有留下...</p>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="row row-cards" style="margin-top: 1px; display: none;" id="examine_article_list">
          <!-- 个人介绍 -->
          <div class="col-12">
            <div class="card">
              <div class="card-header">
                <h2 class="card-title">审核中的帖子</h2>
              </div>
              <div class="card-body">
                <div class="divide-y" id="article-items-body">
                  <!-- 动态生成帖子列表 -->

                  <!-- <div>
                    <div class="row">
                      <div class="col">
                        <div class="text-truncate">
                          <a href="javascript:void(0);" class="examine_article_list_a_title">
                            <strong> 标题 </strong>
                          </a>
                        </div>
                        <div class="text-muted mt-2">
                          <div class="row">
                            <div class="col">
                              <ul class="list-inline list-inline-dots mb-0">
                                <li class="list-inline-item">
                                  <svg xmlns="http://www.w3.org/2000/svg"
                                    class="icon icon-tabler icon-tabler-clock-edit" width="24" height="24"
                                    viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
                                    stroke-linecap="round" stroke-linejoin="round">
                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                    <path d="M21 12a9 9 0 1 0 -9.972 8.948c.32 .034 .644 .052 .972 .052"></path>
                                    <path d="M12 7v5l2 2"></path>
                                    <path d="M18.42 15.61a2.1 2.1 0 0 1 2.97 2.97l-3.39 3.42h-3v-3l3.42 -3.39z"></path>
                                  </svg>
                                  时间
                                </li>
                              </ul>
                            </div>
                            <div class="col-auto d-md-inline">
                              <ul class="list-inline list-inline-dots mb-0">
                                <li class="list-inline-item">
                                  <svg xmlns="http://www.w3.org/2000/svg"
                                    class="icon icon-tabler icon-tabler-clock-edit" width="24" height="24"
                                    viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
                                    stroke-linecap="round" stroke-linejoin="round">
                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                    <path d="M21 12a9 9 0 1 0 -9.972 8.948c.32 .034 .644 .052 .972 .052"></path>
                                    <path d="M12 7v5l2 2"></path>
                                    <path d="M18.42 15.61a2.1 2.1 0 0 1 2.97 2.97l-3.39 3.42h-3v-3l3.42 -3.39z"></path>
                                  </svg>
                                  <span id="examine_state" style="color: red;">未通过审核</span>
                                </li>
                              </ul>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div> -->

                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
  $(function () {
    // 构造查询用户信息的queryString
    let userInfoQueryString = '';
    if (profileUserId) {
      userInfoQueryString = '?id=' + profileUserId
    }
    console.log(userInfoQueryString);
    // ============= 获取用户信息 =============
    // 成功时调用initProfileUserInfo()方法，初始化用户数据
    $.ajax({
      type: 'get',
      url: '/user/info' + userInfoQueryString,
      success: function(respData) {
        if (respData.code == 0) {
          initProfileUserInfo(respData.data);
        } else {
          $.toast({
            heading: '警告',
            text: respData.message,
            icon: 'warning'
          });
        }
      },
      error: function() {
        $.toast({
            heading: '错误  ',
            text: '访问出现问题，请与管理员联系.',
            icon: 'error'
          });
      }
    });

    // ============= 设置Profile页面用户信息 ================
    function initProfileUserInfo(user) {
      console.log(user);
      // 默认头像路径
      if (!user.avatarUrl) {
        user.avatarUrl = avatarUrl;
      }
      console.log('currentUserId = '+currentUserId);

      // 按钮
      if (user.id != currentUserId) {
        // 查看他人的主页

        // 显示发私信按钮
        $('#div_profile_btn').show();
        // 设置发私信目标用户信息
        $('#btn_profile_send_message').click(function() {
          setMessageReceiveUserInfo(user.id, user.nickname);
        });

        // 隐藏关注或取消关注按钮
        if (user.subscribeState == undefined || user.subscribeState == 0) {
          // 未关注状态，隐藏取消关注按钮
          $('#btn_profile_cancel_subscribe').hide();
        } else {
          // 关注状态，隐藏关注按钮
          $('#btn_profile_subscribe').hide();
        }

        if ($('#index_nav_name_sub').html() == '管理员') {
          if (user.state == 0) {
            $('#btn_ban').show();
          } else if(user.state == 1) {
            $('#btn_unban').show();
          }
        }
      } else {
        $('#examine_article_list').show();
        requestProfileUserExamineArticle();
      }

      // 设置用户ID
      $('#profile_user_id').val(user.id);
      // 设置头像
      $('#profile_avatar').css('background-image', 'url(' + user.avatarUrl + ')');
      // 用户昵称
      $('#profile_nickname').html(user.nickname);
      // 发贴数
      $('#profile_articleCount').html(user.articleCount);
      // 关注数
      $('#profile_subscribeCount').html(user.subscribeCount);
      // 粉丝数
      $('#profile_fanCount').html(user.fanCount);
      // 邮箱
      if (user.email) {
        $('#profile_email').html(user.email);
      }
      // 注册日期
      $('#profile_createTime').html(user.createTime);
      // 个人介绍
      if (user.remark) {
        $('#profile_remark').html(user.remark);
      }
    }

    $('#profile_subscribeCount').click(function() {
      $('#forum-content').load('subscribe.html');
    });

    $('#profile_fanCount').click(function() {
      $('#forum-content').load('fans.html');
    });

    // 处理关注
    $('#btn_profile_subscribe').click(function () {
      $.ajax({
        url: '/subscribe/like?subscribedUserId=' + profileUserId,
        type: 'post',
        success: function(respData) {
          if (respData.code == 0) {
            $.toast({
              heading: '成功',
              text: respData.message,
              icon: 'success'
            });
            // 隐藏关注按钮
            $('#btn_profile_subscribe').hide();
            // 显示取消关注按钮
            $('#btn_profile_cancel_subscribe').show();
          } else {
            // 提示失败信息
            $.toast({
              heading: '警告',
              text: respData.message,
              icon: 'warning'
            });
          }
        },
        error: function() {
          // HTTP 请求错误
          $.toast({
            heading: '错误',
            text: '访问出现问题，请与管理员联系.',
            icon: 'error'
          });
        }
      });
    });

    // 处理取消关注
    $('#btn_profile_cancel_subscribe').click(function () {
      $.ajax({
        url: '/subscribe/cancel?subscribedUserId=' + profileUserId,
        type: 'post',
        success: function(respData) {
          if (respData.code == 0) {
            $.toast({
              heading: '成功',
              text: respData.message,
              icon: 'success'
            });
            // 隐藏取消关注按钮
            $('#btn_profile_cancel_subscribe').hide();
            // 显示关注按钮
            $('#btn_profile_subscribe').show();
          } else {
            // 提示失败信息
            $.toast({
              heading: '警告',
              text: respData.message,
              icon: 'warning'
            });
          }
        },
        error: function() {
          // HTTP 请求错误
          $.toast({
            heading: '错误',
            text: '访问出现问题，请与管理员联系.',
            icon: 'error'
          });
        }
      });
    });


    // 构造查询用户信息的queryString
    let articleListQueryString = '';
    if (profileUserId) {
      articleListQueryString = '?userId=' + profileUserId
    }
    // ============= 获取当前用户发贴 =============
    // url: 'article/getAllByUserId' + articleListQueryString
    // 成功后，调用buildProfileUserArticle()方法，构造帖子列表
    $.ajax({
      url: '/article/getAllByUserId' + articleListQueryString,
      type: 'get',
      success: function(respData) {
        if (respData.code == 0) {
          buildProfileUserArticle(respData.data);
        } else {
          $.toast({
            heading: '警告',
            text: respData.message,
            icon: 'warning'
          });
        }
      },
      error : function() {
        $.toast({
            heading: '错误  ',
            text: '访问出现问题，请与管理员联系.',
            icon: 'error'
          });
      }
    });

    // ============= 构建用户帖子列表 =============
    function buildProfileUserArticle(data) {
      // 没有帖子
      if(data.length == 0) {
        $('#profile_article_body').html('还没有帖子');
        return;
      }
      // 构建帖子列表
      data.forEach(article => {
        let articleHtmlStr = ' <li class="timeline-event">'
        + ' <div class="timeline-event-icon bg-twitter-lt">'
        + ' <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-message-plus" width="24"'
        + ' height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"'
        + ' stroke-linecap="round" stroke-linejoin="round">'
        + ' <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>'
        + ' <path d="M4 21v-13a3 3 0 0 1 3 -3h10a3 3 0 0 1 3 3v6a3 3 0 0 1 -3 3h-9l-4 4"></path>'
        + ' <path d="M10 11l4 0"></path>'
        + ' <path d="M12 9l0 4"></path>'
        + ' </svg>'
        + ' </div>'
        + ' <div class="card timeline-event-card">'
        + ' <div class="card-body">'
        + ' <div>'
        + ' <div class="row">'
        + ' <div class="col">'
        + ' <div class="text-truncate">'
        + ' <a href="javascript:void(0);"  class="profile_article_list_a_title">'
        + ' <strong>' + article.title + '</strong>'
        + ' </a>'
        + ' </div>'
        + ' <div class="text-muted mt-2">'
        + ' <div class="row">'
        + ' <div class="col">'
        + ' <ul class="list-inline list-inline-dots mb-0">'
        + ' <li class="list-inline-item">'
        + ' <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-clock-edit"'
        + ' width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"'
        + ' fill="none" stroke-linecap="round" stroke-linejoin="round">'
        + ' <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>'
        + ' <path d="M21 12a9 9 0 1 0 -9.972 8.948c.32 .034 .644 .052 .972 .052"></path>'
        + ' <path d="M12 7v5l2 2"></path>'
        + ' <path d="M18.42 15.61a2.1 2.1 0 0 1 2.97 2.97l-3.39 3.42h-3v-3l3.42 -3.39z"></path>'
        + ' </svg> '
        + article.createTime
        + ' </li>'
        + ' </ul>'
        + ' </div>'
        + ' <div class="col-auto d-none d-md-inline">'
        + ' <ul class="list-inline list-inline-dots mb-0">'
        + ' <li class="list-inline-item">'
        + ' <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-eye"'
        + ' width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"'
        + ' fill="none" stroke-linecap="round" stroke-linejoin="round">'
        + ' <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>'
        + ' <path d="M12 12m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"></path>'
        + ' <path'
        + ' d="M22 12c-2.667 4.667 -6 7 -10 7s-7.333 -2.333 -10 -7c2.667 -4.667 6 -7 10 -7s7.333 2.333 10 7">'
        + ' </path>'
        + ' </svg> '
        + article.visitCount
        + ' </li>'
        + ' <li class="list-inline-item">'
        + ' <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-thumb-up" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M7 11v8a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1v-7a1 1 0 0 1 1 -1h3a4 4 0 0 0 4 -4v-1a2 2 0 0 1 4 0v5h3a2 2 0 0 1 2 2l-1 5a2 3 0 0 1 -2 2h-7a3 3 0 0 1 -3 -3" /></svg> '
        + article.likeCount
        + ' </li>'
        + ' <li class="list-inline-item">'
        + ' <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-star" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg> '
        + article.markCount
        + ' </li>'
        + ' <li class="list-inline-item">'
        + ' <svg xmlns="http://www.w3.org/2000/svg"'
        + ' class="icon icon-tabler icon-tabler-message-circle" width="24" height="24"'
        + ' viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"'
        + ' stroke-linecap="round" stroke-linejoin="round">'
        + ' <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>'
        + ' <path d="M3 20l1.3 -3.9a9 8 0 1 1 3.4 2.9l-4.7 1"></path>'
        + ' <path d="M12 12l0 .01"></path>'
        + ' <path d="M8 12l0 .01"></path>'
        + ' <path d="M16 12l0 .01"></path>'
        + ' </svg> '
        + article.replyCount
        + ' </li>'
        + ' </ul>'
        + ' </div>'
        + ' </div>'
        + ' </div>'
        + ' </div>'
        + ' </div>'
        + ' </div>'
        + ' </div>'
        + ' </div>'
        + ' </li>';
        
        // 追加到父标签
        let profileArtilceItem = $(articleHtmlStr);
        // 获取标题的 a 标签
        let articleTitle = profileArtilceItem.find('.profile_article_list_a_title');
        // 处理标题点击事件
        articleTitle.click(function() {
          // 通过全局变量保存当前访问的帖子信息
          currentArticle = article;
          $('#forum-content').load('details.html');
        });
        // 追加到父标签
        $('#profile_article_body').append(profileArtilceItem);
        
      });
    }

    function requestProfileUserExamineArticle() {
      $.ajax({
        url: '/article/getExamineList',
        type: 'get',
        success: function(respData) {
          if (respData.code == 0) {
            buildProfileUserExamineArticle(respData.data);
          } else {
            $.toast({
              heading: '警告',
              text: respData.message,
              icon: 'warning'
            });
          }
        },
        error : function() {
          $.toast({
              heading: '错误  ',
              text: '访问出现问题，请与管理员联系.',
              icon: 'error'
            });
        }
      });
    }

    function buildProfileUserExamineArticle(data) {
      // 没有帖子
      if(data.length == 0) {
        $('#article-items-body').html('暂无！');
        return;
      }

      data.forEach(article => {
        let articleHtmlStr = '<div>'
          + '<div class="row">'
          + '<div class="col">'
          + '<div class="text-truncate">'
          + '<a href="javascript:void(0);" class="examine_article_list_a_title">'
          + '<strong>' + article.title +'</strong>'
          + '</a>'
          + '</div>'
          + '<div class="text-muted mt-2">'
          + '<div class="row">'
          + '<div class="col">'
          + '<ul class="list-inline list-inline-dots mb-0">'
          + '<li class="list-inline-item">'
          + '<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-history" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 8l0 4l2 2" /><path d="M3.05 11a9 9 0 1 1 .5 4m-.5 5v-5h5" /></svg>'
          + article.updateTime
          + '</li>'
          + '</ul>'
          + '</div>'
          + '<div class="col-auto d-md-inline">'
          + '<ul class="list-inline list-inline-dots mb-0">'
          + '<li class="list-inline-item">'
          + '<svg xmlns="http://www.w3.org/2000/svg"'
          + 'class="icon icon-tabler icon-tabler-clock-edit" width="24" height="24"'
          + 'viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"'
          + 'stroke-linecap="round" stroke-linejoin="round">'
          + '<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>'
          + '<path d="M21 12a9 9 0 1 0 -9.972 8.948c.32 .034 .644 .052 .972 .052"></path>'
          + '<path d="M12 7v5l2 2"></path>'
          + '<path d="M18.42 15.61a2.1 2.1 0 0 1 2.97 2.97l-3.39 3.42h-3v-3l3.42 -3.39z"></path>'
          + '</svg>'
          + '<span id="examine_state">'
          + '</span></li></ul></div></div></div></div></div></div>'

        let profileArtilceItem = $(articleHtmlStr);
        let state = profileArtilceItem.find('#examine_state');
        if (article.state == 1) {
          state.html('审核中');
          state.css("color","green");
        } else if (article.state == 2) {
          state.html('未通过审核');
          state.css("color","red");
        }
        // 获取标题的 a 标签
        let articleTitle = profileArtilceItem.find('.examine_article_list_a_title');
        // 处理标题点击事件
        articleTitle.click(function() {
          // 通过全局变量保存当前访问的帖子信息
          currentArticle = article;
          $('#forum-content').load('examine_detail.html');
        });
        // 追加到父标签
        $('#article-items-body').append(profileArtilceItem);
      });
    }

    // 禁言按钮
    $('#btn_ban').click(function() {
      $.ajax({
        url: '/user/ban?userId=' + profileUserId,
        type: 'post',
        success: function(respData) {
          if (respData.code == 0) {
            $('#forum-content').load('profile.html');
            $.toast({
              heading: '成功',
              text: respData.message,
              icon: 'success'
            });
          } else {
            $.toast({
              heading: '警告',
              text: respData.message,
              icon: 'warning'
            });
          }
        },
        error : function() {
          $.toast({
              heading: '错误  ',
              text: '出错了.',
              icon: 'error'
            });
        }
      });
    });

    // 解除禁言按钮
    $('#btn_unban').click(function() {
      $.ajax({
        url: '/user/unban?userId=' + profileUserId,
        type: 'post',
        success: function(respData) {
          if (respData.code == 0) {
            $('#forum-content').load('profile.html');
            $.toast({
              heading: '成功',
              text: respData.message,
              icon: 'success'
            });
          } else {
            $.toast({
              heading: '警告',
              text: respData.message,
              icon: 'warning'
            });
          }
        },
        error : function() {
          $.toast({
              heading: '错误  ',
              text: '出错了.',
              icon: 'error'
            });
        }
      });
    });
  });
</script>